<template>
<div>
 <div id="practice"></div>
  对应于three.js电子书第一章练习代码，主要是熟悉概念以及引入轨道控制器
</div>
</template>

<script>
 import * as THREE from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 export default {
 name: 'test',
 methods: {
     test(){
         //先拿到practice的dom对象
         let container = document.getElementById('practice');
         //创建场景对象
        // container.height = document.body.height;
        // container.clientHeight = "1000px";
         let scene = new THREE.Scene();
         var defineGeometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
            //类型数组创建顶点数据
        var vertices = new Float32Array([
            0, 0, 0, //顶点1坐标
            50, 0, 0, //顶点2坐标
            0, 100, 0, //顶点3坐标
            0, 0, 10, //顶点4坐标
            0, 0, 100, //顶点5坐标
            50, 0, 10, //顶点6坐标
            ]);
        // 创建属性缓冲区对象
        var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
            // 设置几何体attributes属性的位置属性
        defineGeometry.attributes.position = attribue;
        var material4 = new THREE.MeshBasicMaterial({
            color: 0x0000ff, //三角面颜色
            side: THREE.DoubleSide //两面可见
        }); //材质对象
        var mesh4 = new THREE.Mesh(defineGeometry, material4); //网格模型对象Mesh
        scene.add(mesh4);
         //创建一个立方体几何对象Geometry
         let geometry = new THREE.BoxGeometry(100, 100, 100);
        // let geometry = new THREE.SphereGeometry(60, 40, 40);
         //创建材质对象 
         let material = new THREE.MeshPhongMaterial({
            color:0x0000ff,
            specular:0xffffff,
            shininess:12
        });//材质对象
        //网格模型对象Mesh
        let mesh = new THREE.Mesh(geometry, material);
        //网格模型添加到场景中 
        scene.add(mesh);
        //辅助三维坐标系
        var axisHelper = new THREE.AxisHelper(250);
        scene.add(axisHelper); 
        //点光源
        let point = new THREE.PointLight(0xffffff);
        //点光源位置
        point.position.set(400, 200, 300); 
        //点光源添加到场景中
        scene.add(point); 
        //环境光
        let ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        //相机系数设置
        //窗口宽度
        let width = container.clientWidth; 
        //窗口高度
        let height = container.clientHeight; 
        //窗口宽高比
        let k = width / height;
        //三维场景显示范围控制系数，系数越大，显示的范围越大 
        let s = 200; 
        //创建相机对象
        let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(250, 250, 250); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        //创建渲染器对象
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        container.appendChild(renderer.domElement); //插入canvas对象

    // 球体网格模型
    var geometry2 = new THREE.SphereGeometry(60, 40, 40);
    var material2 = new THREE.MeshLambertMaterial({
        color:0xff0000,
        opacity:0.7,
         transparent:true
    });
    var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
    mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120
    scene.add(mesh2);

    // 圆柱网格模型
    var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
    var material3 = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    });
    var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
    // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120
    mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
    scene.add(mesh3); //
        // 执行渲染操作   
        // 指定场景、相机作为参数
        let T0 = new Date();//上次时间
        requestAnimationFrame(function a(){
            let T1 = new Date();//本次时间
            let t = T1-T0;//时间差
            T0 = T1;//把本次时间赋值给上次时间
            mesh.rotateY(0.001*t);
            mesh2.rotateZ(0.001*t);
            mesh3.rotateX(0.001*t);
            renderer.render(scene, camera);
            requestAnimationFrame(a);
        });
    function render() {
        renderer.render(scene,camera);//执行渲染操作
    }
    render();
    let controls = new OrbitControls(camera,renderer.domElement);//创建控件对象
    // controls.addEventListener('change', render);//监听鼠标、键盘事件
    },
 },
    mounted() {
        this.test();
     }
 }
</script>
<style scoped>
 #practice {
 height: 400px;
 }
</style>